<script setup lang="ts">
import router from "@/Router";
import {currentSongState, itemRecCount,} from "@/store/songStore";
import AudioPlayer from "@/Components/audioPlayer.vue";
import {getItemRecSongs} from "@/utils/songUtil";
import {onMounted, ref} from "vue";
import {onBeforeMount} from "vue";
import {findUserById} from "@/Network/userApi";
import type {typeSong} from "@/store/dataType";

function sendPlayTab(){
  router.push("/song_play")
}
function addIndex(){
  currentSongState.value.currentIndex
      = currentSongState.value.currentIndex == currentSongState.value.songList.length-1
      ? 0
      : currentSongState.value.currentIndex+1
  console.log(currentSongState.value.currentIndex)
}
function minusIndex(){
  currentSongState.value.currentIndex = currentSongState.value.currentIndex==0
      ? currentSongState.value.songList.length-1
      : currentSongState.value.currentIndex-1
  console.log(currentSongState.value.currentIndex)
}

onMounted(()=>{
  // alert("欢迎你")
  getLoveSongList()
})
function getLoveSongList() {
  let currentUserId = localStorage.getItem("userId")
  let loveSongList:typeSong[] = ref([])
  findUserById(currentUserId).then(res=>{
    for(let i = 0;i<res.data.userLoves.length;i++){
      loveSongList.value[i]=res.data.userLoves[i].song
    }

    if(currentSongState.value.songList[0].title == "占用罢了"){
      currentSongState.value.songList = loveSongList.value
      console.log("xxxxx")
    }
  })
}

</script>

<template>
  <div class="song-bottom fixed flex items-center justify-center z-9 w-full h-18 bg-white bottom-0 border-t-5 border-yellow-1  px-10 select-none ml-3.5">
    <div class="picture flex items-center gap-2 w-140">
      <img @click="sendPlayTab" class="w-13 " alt="图片暂无" :src="currentSongState.songList[currentSongState.currentIndex].imageUrl"/>
      <el-scrollbar class="" style="width:300px; height: 50px" >
        <div class=" text-lg whitespace-nowrap">{{currentSongState.songList[currentSongState.currentIndex].title}}</div>
        <div class=" text-xs whitespace-nowrap">{{ currentSongState.songList[currentSongState.currentIndex].artist }}</div>
      </el-scrollbar>
    </div>
    <div
        class="icons grow flex items-center gap-5 text-[#51596D]  ext-xl">
      <svg class="download w-6 h-6 hover:text-yellow" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 21h12M12 3v14m0 0l5-5m-5 5l-5-5"/></svg>
      <svg class="random w-6 h-6 hover:text-yellow" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g id="feRandom0" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="feRandom1" fill="currentColor"><path id="feRandom2" d="M4 17a1 1 0 0 1 0-2h2l3-3l-3-3H4a1.001 1.001 0 0 1 0-2h3l4 4l4-4h2V5l4 3.001L17 11V9h-1l-3 3l3 3h1v-2l4 3l-4 3v-2h-2l-4-4l-4 4H4Z"/></g></g></svg>
      <svg @click="minusIndex" class="back  h-10 hover:text-yellow" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M256 448c106 0 192-86 192-192S362 64 256 64S64 150 64 256s86 192 192 192Z"/><path fill="currentColor" d="m117.23 246.7l114.45-69.14a10.78 10.78 0 0 1 16.32 9.31v53.32l103.68-62.63a10.78 10.78 0 0 1 16.32 9.31v138.26a10.78 10.78 0 0 1-16.32 9.31L248 271.81v53.32a10.78 10.78 0 0 1-16.32 9.31L117.23 265.3a10.89 10.89 0 0 1 0-18.6Z"/></svg>
      <svg @click="addIndex" class="next  h-10 hover:text-yellow" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192s192-86 192-192Z"/><path fill="currentColor" d="m394.77 246.7l-114.45-69.14a10.78 10.78 0 0 0-16.32 9.31v53.32l-103.68-62.63a10.78 10.78 0 0 0-16.32 9.31v138.26a10.78 10.78 0 0 0 16.32 9.31L264 271.81v53.32a10.78 10.78 0 0 0 16.32 9.31l114.45-69.14a10.89 10.89 0 0 0 0-18.6Z"/></svg>
      <audio-player
          class="grow"
          :audioUrl="currentSongState.songList[currentSongState.currentIndex].songUrl"
          :isPauseTtsAudio="true"
          :key="new Date().getTime()"
      >
      </audio-player>
    </div>



  </div>
</template>

<style scoped>

</style>